
<ion-content no-padding class="my-rent-huose">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
<top-tab [data]="items"></top-tab>
<div *ngIf="currentPageIndex==0">
  <ion-grid no-padding
            *ngFor="let v of ContractList;"
            (click)="gotoRentingDetail(v) ">
    <div class="background-div" [ngClass]="roomStyle(v,'warp')">
      <ion-row>
        <ion-col col-9>
          {{v.uuid}}</ion-col>
        <ion-col ion-text text-right> {{v.statusName}}</ion-col>
      </ion-row>
    </div>
    <div class="detail-div">
      <ion-icon [name]="(v.status == 2 ||v.status==4 ||v.status==8)?'littlegreen':'gray' "
                class="right-point" no-padding no-margin></ion-icon>
      <ion-icon [name]= "(v.status == 2 ||v.status==4 ||v.status==8)?'moregreen':'gray' "
                class="left-point" no-padding no-margin></ion-icon>
      <div class="out-circle" [ngClass]="roomStyle(v,'out-circle')">
        <div class="inner-circle">
          <div class="data-div">
            <span class="day">还剩</span><br/>
            <span class="day-number" [ngClass]="roomStyle(v,'dateColor')">
              {{v.remainingDays}}</span><br/>
            <span class="day">天</span>
          </div>
        </div>
      </div>
      <ion-col class="detail-msg" col-6>
        <ion-row>
          <ion-col col-6>合同期限</ion-col>
          <ion-col col-6 ion-text text-right>{{v.leaseName}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-6>押金</ion-col>
          <ion-col col-6 ion-text text-right>&yen;{{v.deposit}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-6>月租金</ion-col>
          <ion-col col-6 ion-text text-right>&yen;{{v.rental}}</ion-col>
        </ion-row>
        <p text-right no-margin>
          <button
            *ngIf= "v.status == 2 ? true : false"
            no-margin
            ion-button outline  (click)="goCheckstand(v); $event.stopPropagation()">
            去支付
          </button>
          <button
            *ngIf= "v.status == 8 ? true : false"
            no-margin
            ion-button outline  (click)="gotoPayRent(v); $event.stopPropagation()">
            交房租
          </button>
        </p>
      </ion-col>
    </div>
  </ion-grid>
  <ion-grid class="notice" *ngIf=" ContractList.length == 0 ">暂无租房消息！</ion-grid>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="canLoadMore">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <div *ngIf="!canLoadMore&&ContractList.length>10"
       style="text-align: center;width: 100%;height: 60px;padding: 20px 0;color:#848484">
    ————————别扯啦!———————-
  </div>
</div>
<div *ngIf="currentPageIndex==1">
  <ion-grid no-padding
            *ngFor="let v of earnestList;">
    <div class="background-div" [ngClass]="roomStyle(v,'warp')">
      <ion-row>
        <ion-col col-9>{{v.uuid}}</ion-col>
        <ion-col ion-text text-right> {{v.statusName}}</ion-col>
      </ion-row>
    </div>
    <div class="detail-div">
      <ion-icon [name]="(v.status == 2 ||v.status==4 ||v.status==8)?'littlegreen':'gray' "
                class="right-point" no-padding no-margin></ion-icon>
      <ion-icon [name]= "(v.status == 2 ||v.status==4 ||v.status==8)?'moregreen':'gray' "
                class="left-point" no-padding no-margin></ion-icon>
      <div class="out-circle earnest-text-center" [ngClass]="roomStyle(v,'out-circle')">
        <div class="inner-circle">
          <span class="day-number" [ngClass]="roomStyle(v,'dateColor')">
              {{v.houseNo}}</span><br/>
          <span class="day">房间订单</span>
        </div>
      </div>
      <ion-col class="detail-msg" col-12>
        <ion-row>
          <ion-col col-4>金额</ion-col>
          <ion-col ion-text text-right>&yen;{{v.money}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>缴费日</ion-col>
          <ion-col ion-text text-right>{{v.payTime}}</ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>到期日</ion-col>
          <ion-col ion-text text-right>{{v.dueTime}}</ion-col>
        </ion-row>
        <p text-right no-margin>
          <button
            *ngIf= "v.status == 2 ? true : false"
            no-margin
            ion-button outline  (click)="goContractPay(v)">
            去租房
          </button>
        </p>
      </ion-col>
    </div>
  </ion-grid>
  <ion-grid class="notice" *ngIf=" earnestList.length == 0 ">暂预定消息！</ion-grid>
</div>
</ion-content>
